<template>
  <el-table
    :data="splicePortList"
    border
    :span-method="objectSpanMethod"
    style="width: 100%"
    max-height="500px"
  >
    <el-table-column
      type="index"
      :label="$t('SEQUENCE')"
      :width="resetSize(60)"
      align="center"
      fixed="left"
    />
    <el-table-column
      prop="import"
      :label="$t('INPORT')"
    >
      <el-table-column
        prop="inputName"
        :label="$t('IMPORT_NAME')"
      />
      <el-table-column
        prop="inputSplicePortName"
        :label="$t('IMPORT_PORT_NUMBER')"
      />
      <el-table-column
        prop="inputPortName"
        :label="$t('PORT_NAME')"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.inputPortName" :placeholder="$t('ENTER_PORT_NAME')" />
          <span class="hidden">{{ scope.row.inputPortName }}</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      prop="export"
      :label="$t('OUTPORT')"
    >
      <el-table-column
        prop="outputName"
        :label="$t('EXPORT_NAME')"
      />
      <el-table-column
        prop="outputSplicePortName"
        :label="$t('EXPORT_PORT_NUMBER')"
      />
      <el-table-column
        prop="outputPortName"
        :label="$t('PORT_NAME')"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.outputPortName" placeholder="$t('ENTER_PORT_NAME')" />
          <span class="hidden">{{ scope.row.inputPortName }}</span>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column
      prop="status"
      :label="$t('ON_STATE')"
      width="120"
    >
      <template slot-scope="scope">
        <span>{{ scope.row.inputStatus !== 'IDLE' || scope.row.outputStatus !== 'IDLE'?$t('USED'):$t('NOT_USED') }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    name: 'SpliceClosure',
    props: {
      splicePortList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {

      }
    },
    methods: {
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        switch (columnIndex) {
        case 1:
          return this.mergeCol('inputName', row, rowIndex)
        case 4:
          return this.mergeCol('outputName', row, rowIndex)
        }
      },
      mergeCol(name, row, rowIndex) {
        const currentInputName = row[name]
        let i = rowIndex
        let num = 0
        while (i < this.splicePortList.length) {
          // 当索引值小于table的数组长度时，循环执行
          if (this.splicePortList[i][name] === currentInputName) {
            i++
            num++
          } else {
            i = this.splicePortList.length
          }
        }
        if (rowIndex > 0) {
          if (currentInputName !== this.splicePortList[rowIndex - 1][name]) {
            return {
              rowspan: num, // 最终将合并的行数返回
              colspan: 1
            }
          } else {
            return {
              rowspan: 0, // 如果相等，则将rowspan设置为0
              colspan: 1
            }
          }
        } else {
          // 如果是第一行，则直接返回
          return {
            rowspan: num,
            colspan: 1
          }
        }
      }
    }

  }

</script>
<style lang='scss' scoped>
.hidden{
  display: none;
}
</style>
